<template>
	<div>
		<h3>求和为：{{ sum }}</h3>
		<h3>姓名为：{{ person.name }}</h3>
		<h3>年龄为:{{ person.age }}</h3>
		<button @click="addSum">求和+1</button>
		<button @click="editName">修改姓名</button>
		<button @click="editAge">修改年龄</button>
		<button @click="editPerson">修改人</button>
	</div>
</template>

<script setup lang="ts" name="App">
	import {ref,shallowRef,shallowReactive} from 'vue'
	let sum=ref(0)
	let person=shallowRef({
			name:'123',
			age:18
		})
	let person2=shallowReactive({
		name:'333',
		age:19
	})
	
	function addSum(){
		sum.value+=1
	}

	function editName(){
		person.value.name="321"
	}

	function editAge(){
		person.value.age=19
	}

	function editPerson(){
		person.value={name :"321",age:20}
	}
</script>

<style>
	.wraper .title {
		padding: 20px;
		text-align: center;
		min-width: 610px;
	}
	.wraper .small{
		font-size: 15px;
	}
	.wraper .list-group-item {
		min-width: 230px;
	}
</style>